<template>
  <view class="content">
    <view class="box">
      <input confirm-type="search" :focus="true" class="ipt" v-model="value" placeholder="搜索内容"
        placeholder-class="tishi" @confirm="goBack" />
      <image class="img" src="../../static/img/magnifier.png" mode="" @tap="goBack()"></image>
      <view class="text" @tap="go()">
        取消
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        value: ''
      };
    },
    onLoad(obj) {
      console.log(obj);
      if(!obj.value || obj.value == 'undefined') {
         this.value = ''
      }else {
        this.value = obj.value
      }
    },
    methods: {
      go() {
        this.value = ''
        uni.$emit('isRefresh', this.value)
        uni.navigateBack({
          delta: 1
        })
      },
      goBack() {
        uni.setStorageSync('searchValue',  this.value)
        uni.navigateBack({
          delta: 1
        })
      }

    }
  }
</script>

<style lang="scss">
  .content {
    min-height: 100vh;
    background-color: #F2F3F6;

    .box {
      position: relative;
      height: 102rpx;
      display: flex;
      align-items: center;
      padding: 0 36rpx 0 32rpx;
      background-color: #fff;

      .ipt {
        width: 600rpx;
        height: 60rpx;
        background: #F2F3F6;
        border-radius: 124rpx 124rpx 124rpx 124rpx;
        padding-left: 72rpx;
        font-size: 24rpx;
        box-sizing: border-box;
      }

      .img {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        top: 30rpx;
        left: 48rpx;
      }

      .tishi {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.4);
      }

      .text {
        margin-left: 20rpx;
        font-size: 30rpx;
        color: rgba(0, 0, 0, 0.6);
      }
    }
  }
</style>